<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap-css -->
<link th:href="@{/static/daqi/css/bootstrap.css}" rel="stylesheet" type="text/css" media="all" />
<!--// bootstrap-css -->
<!-- css -->
<link rel="stylesheet" th:href="@{/static/daqi/css/style.css}" type="text/css" media="all" />
<!--// css -->
<link rel="stylesheet" th:href="@{/static/daqi/css/lightbox.css}">  
<link rel="stylesheet" th:href="@{/static/daqi/css/owl.carousel.css}" type="text/css" media="all">
<link th:href="@{/static/daqi/css/owl.theme.css}" rel="stylesheet">
<!-- font-awesome icons -->
<link th:href="@{/static/daqi/css/font-awesome.css}" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!-- font -->
<link href="http://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<!-- //font -->
<script th:src="@{/static/daqi/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/static/daqi/js/bootstrap.js}"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<script>
$(document).ready(function() { 
	$("#owl-demo").owlCarousel({
 
		autoPlay: 3000, //Set AutoPlay to 3 seconds
		autoPlay:true,
		items : 4,
		itemsDesktop : [640,5],
		itemsDesktopSmall : [414,4]
 
	});
	
}); 
</script>

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js}"></script>
<![endif]-->
</head>
<body>
	<!-- banner -->
	<div class="banner jarallax">
			<div class="w3layouts-header-top">
				<div class="container">
					<div class="w3-header-top-grids">
						<div class="w3-header-top-left">

						</div>
						<div class="w3-header-top-right">
							<div class="agileinfo-social-grids">
								<ul>
<!--									判断session存不存在,存在显示注销-->
<!--									不存在显示登录-->

									<li th:if="${user!=null}">欢迎,<span th:text="${user.username}" ></span>
										<a href="#"><i class="fa fa-facebook">注销</i></a></li>
<!--                                      不满足这个条件-->
									<li th:if="${user==null}"><a href="#"><i class="fa fa-facebook">登录</i></a></li>

								</ul>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
			<div class="banner-info">
				<div class="banner-info-text">
					<div class="container">
						<div class="agileits-logo">
							<h1><a th:href="index.html">Delicious<span> Food</span></a></h1>
						</div>
						<div class="wthree-banner">
							<div class="slider">
								<script th:src="@{/static/daqi/js/responsiveslides.min.js}"></script>
								<script>
										// You can also use "$(window).load(function() {"
										$(function () {
										// Slideshow 4
											$("#slider3").responsiveSlides({
												auto: true,
												pager: true,
												nav: true,
												speed: 500,
												namespace: "callbacks",
												before: function () {
													$('.events').append("<li>before event fired.</li>");
												},
												after: function () {
													$('.events').append("<li>after event fired.</li>");
												}
											 });				
										});
								</script>
								<div  id="top" class="callbacks_container-wrap">
									<ul class="rslides" id="slider3">
										<li>
											<div class="slider-info">
												<h3>Lorem ipsum</h3>
												<p >Curabitur eget metus eget erat vehicula semper vitae sed leo</p>
												<div class="more-button">
													<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
												</div>
											</div>
										</li>
										<li>
											<div class="slider-info">
												<h3>Nullam semper</h3>
												<p>Quisque nisl risus, egestas in convallis vitae, fringilla cursus magna</p>
												<div class="more-button">
													<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
												</div>
											</div>
										</li>
										<li>
											<div class="slider-info">
												<h3>Duis tempor</h3>
												<p> Suspendisse bibendum dictum metus, at finibus elit dignissim nec	</p>
												<div class="more-button">
													<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<!-- //banner -->
					</div>
				</div>
				<div class="header-top">
					<div class="container">
						<div class="header-top-info">
							<nav class="navbar navbar-default">
								<!-- Brand and toggle get grouped for better mobile display -->
								<div class="navbar-header">
									<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
										<span class="sr-only">Toggle navigation</span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</button>
								</div>

								<!-- Collect the nav links, forms, and other content for toggling -->
								<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
									<nav>
										<ul class="nav navbar-nav">
											<li class="active"><a th:href="index.html">Home</a></li>
											<li><a href="#about" class="scroll">About</a></li>
											<li><a href="#services" class="scroll">Services</a></li>
											<li><a href="#specials" class="scroll">Specials</a></li>
											<li><a href="#team" class="scroll">Team</a></li>
											<li><a href="#news" class="scroll">News</a></li>
											<li><a href="#mail" class="scroll">Mail Us</a></li>
										</ul>
									</nav>
								</div>
								<!-- /.navbar-collapse -->
							</nav>
						</div>
					</div>
				</div>
			</div>
	</div>
	<!-- //banner -->
	<!-- modal -->
	<div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header"> 
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
					<h4 class="modal-title">Delicious <span>Food</span></h4>
				</div> 
				<div class="modal-body">
					<div class="agileits-w3layouts-info">
						<img src="images/2.jpg" alt="" />
						<p>Duis venenatis, turpis eu bibendum porttitor, sapien quam ultricies tellus, ac rhoncus risus odio eget nunc. Pellentesque ac fermentum diam. Integer eu facilisis nunc, a iaculis felis. Pellentesque pellentesque tempor enim, in dapibus turpis porttitor quis. Suspendisse ultrices hendrerit massa. Nam id metus id tellus ultrices ullamcorper.  Cras tempor massa luctus, varius lacus sit amet, blandit lorem. Duis auctor in tortor sed tristique. Proin sed finibus sem</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //modal -->
	<!-- welcome -->
	<div class="welcome" id="welcome">
		<div class="container">
			<div class="w3-welcome-heading">
				<h2>Welcome</h2>
			</div>
			<div class="w3l-welcome-info">
<!--				商品图片显示的地方-->
				<div class="col-sm-3 welcome-grids"   th:each="good:${glist}">
					<div class="welcome-img">
<!--						${good.pic}   1.jpg-->
 <!--						@{/static/daqi/images/}  http://localhost:8080/SpringbootDemo/static/daqi/images/1.jpg
                             th:src="@{/}"   src=""
                             语法:
                             th:src="images/2.jpg"  错误        th:src="@{/images/2.jpg}"   对 src="images/2.jpg对

                  href="http://fonts.googleapis.com"  正确的
                  th:href="http://fonts.googleapis.com"  错误      th:href/th:src/th:action ="@{}" 对
                         th:href="@{/goods/infor(gid=${good.id})}"    请求的参数   (,,) 多个中间用逗号隔开
-->
						<a th:href="@{/goods/infor(gid=${good.id})}"><img th:src="@{/static/daqi/images/}+${good.pic}"  alt="" height="280" width="350" ></a>
					</div>
				</div>

				<div class="clearfix"> </div>
			</div>
			<div class="w3l-welcome-text">
<!--				<p>Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus omnis optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae </p>-->
			</div>
		</div>
	</div>
	<!-- //welcome -->


	<!-- //newsletter -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="w3-agile-social-grids">

			</div>
			<div class="copyright">
				<p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		</div>
	</div>
	<!-- //footer -->
	<script th:src="@{/static/daqi/js/jarallax.js}"></script>
	<script th:src="@{/static/daqi/js/SmoothScroll.min.js}"></script>
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
	<script th:src="@{/static/daqi/js/responsiveslides.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/daqi/js/move-top.js}"></script>
	<script type="text/javascript" th:src="@{/static/daqi/js/easing.js}"></script>
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
	<!-- //here ends scrolling icon -->
	<!-- Tabs-JavaScript -->
	<script th:src="@{/static/daqi/js/owl.carousel.js}"></script>  
</body>	
</html>